/**
 * 组件配置
 */
import { create } from "zustand";
import { ReactNode } from "react";
import PageDev from "../components/Editor/Material/Page/Dev";
import PageProd from "../components/Editor/Material/Page/Prod";
import ContainerDev, {
  MarginPaddingSize,
} from "../components/Editor/Material/Container/Dev";
import TitleDev, {
  TitlePosition,
} from "../components/Editor/Material/Title/Dev";
import ButtonDev from "../components/Editor/Material/Button/Dev";
import TextDev from "../components/Editor/Material/Text/Dev";
import BaseTableDev from "../components/Editor/Material/BaseTable/Dev";
import ContainerProd from "../components/Editor/Material/Container/Prod";
import TitleProd from "../components/Editor/Material/Title/Prod";
import ButtonProd from "../components/Editor/Material/Button/Prod";
import TextProd from "../components/Editor/Material/Text/Prod";
import FormDev from "../components/Editor/Material/Form/Dev";
import InputDev from "../components/Editor/Material/Input/Dev";
import CheckBoxDev from "../components/Editor/Material/CheckBox/Dev";
import RadioDev from "../components/Editor/Material/Radio/Dev";
import SelectDev from "../components/Editor/Material/Select/Dev";
import InputNumberDev from "../components/Editor/Material/InputNumber/Dev";
import TextAreaDev from "../components/Editor/Material/TextArea/Dev";
import DatePickerDev from "../components/Editor/Material/DatePicker/Dev";
import SwitchDev from "../components/Editor/Material/Switch/Dev";
import CascaderDev from "../components/Editor/Material/Cascadar/Dev";
import ImageDev from "../components/Editor/Material/Image/Dev";

// 公共常量
export enum ComponentEnum {
  Base = "基础类组件",
  Layout = "布局类组件",
  Table = "表格类",
  Form = "表单类",
  Chart = "图表类",
  Media = "媒体类",
}

const COMMON_ACCEPT = [
  "Container",
  "Button",
  "Title",
  "Text",
  "Table",
  "BarCharts",
  "Select",
  "Radio",
  "Checkbox",
  "DatePicker",
  "Input",
  "InputNumber",
  "TextArea",
  "Cascader",
  "Switch",
  "Form",
];

const MARGIN_PADDING_OPTIONS = [
  { label: "大", value: MarginPaddingSize.large },
  { label: "中", value: MarginPaddingSize.medium },
  { label: "小", value: MarginPaddingSize.small },
];

const TITLE_POSITION_OPTIONS = [
  { label: "居中", value: TitlePosition.center },
  { label: "居左", value: TitlePosition.left },
  { label: "居右", value: TitlePosition.right },
];

export const dataColumnDefault = [
  { title: "姓名", dataIndex: "name", key: "name" },
  { title: "年龄", dataIndex: "age", key: "age" },
  { title: "地址", dataIndex: "address", key: "address" },
  { title: "出生日期", dataIndex: "date", key: "date " },
  { title: "操作", dataIndex: "action", key: "action" },
];

// 公共配置生成器
const createFormFieldConfig = (labelText: string, nameText: string) => ({
  // 默认值配置
  defaults: {
    label: labelText,
    name: nameText,
    disabled: false,
  },
  // 属性配置
  attrs: {
    label: { type: "input", label: "标签名", defaultValue: labelText },
    name: { type: "input", label: "表单字段名", defaultValue: nameText },
    disabled: { type: "switch", label: "禁用", defaultValue: false },
  },
});

// 完整组件配置
const componentConfig = {
  Page: {
    name: "Page",
    type: ComponentEnum.Layout,
    desc: "页面",
    defaultProps: {
      accept: [
        "Container",
        "Button",
        "Title",
        "Text",
        "Table",
        "BarCharts",
        "Form",
        "Image",
      ],
    },
    dev: PageDev,
    prod: PageProd,
  },
  Container: {
    name: "Container",
    icon: "icon-rongqi",
    desc: "容器",
    type: ComponentEnum.Layout,
    defaultProps: {
      accept: COMMON_ACCEPT.filter((a) => a !== "Form"),
      margin: MarginPaddingSize.medium,
      padding: MarginPaddingSize.medium,
      isShowBorder: true,
    },
    attrs: {
      isShowBorder: { type: "switch", label: "显示边框" },
      margin: {
        type: "select",
        label: "外边距",
        options: MARGIN_PADDING_OPTIONS,
      },
      padding: {
        type: "select",
        label: "内边距",
        options: MARGIN_PADDING_OPTIONS,
      },
    },
    dev: ContainerDev,
    prod: ContainerProd,
  },
  Button: {
    name: "Button",
    desc: "按钮",
    type: ComponentEnum.Base,
    icon: "icon-anniuzu",
    defaultProps: { text: "按钮", type: "primary", size: "middle" },
    attrs: {
      text: { type: "input", label: "按钮内容" },
      size: {
        type: "select",
        label: "按钮大小",
        options: ["large", "middle", "small"].map((v) => ({
          label: v,
          value: v,
        })),
      },
      type: {
        type: "select",
        label: "按钮类型",
        options: ["primary", "danger", "success", "warning"].map((v) => ({
          label: v,
          value: v,
        })),
      },
      disabled: { type: "switch", label: "禁用" },
    },
    events: {
      click: { desc: "onClick 点击事件", type: "click" },
      onDoubleClick: { desc: "onDoubleClick 双击事件", type: "onDoubleClick" },
    },
    dev: ButtonDev,
    prod: ButtonProd,
  },
  Title: {
    name: "Title",
    desc: "标题",
    icon: "icon-biaoti",
    type: ComponentEnum.Base,
    defaultProps: { text: "标题", level: 1 },
    attrs: {
      text: { type: "input", label: "标题内容" },
      level: {
        type: "select",
        label: "标题等级",
        options: [1, 2, 3, 4, 5].map((v) => ({
          label: `${v}级标题`,
          value: v,
        })),
      },
      position: {
        type: "select",
        label: "标题位置",
        options: TITLE_POSITION_OPTIONS,
      },
      underline: { type: "switch", label: "下划线" },
      markers: { type: "switch", label: "标记" },
    },
    dev: TitleDev,
    prod: TitleProd,
  },
  Text: {
    name: "Text",
    desc: "正文",
    icon: "icon-text",
    type: ComponentEnum.Base,
    defaultProps: {
      text: "这是一段文字",
      size: MarginPaddingSize.medium,
      color: "#000000",
      bold: false,
      italic: false,
      underline: false,
      strikethrough: false,
      margin: MarginPaddingSize.medium,
      padding: MarginPaddingSize.medium,
    },
    attrs: {
      text: { type: "input", label: "正文内容" },
      size: {
        type: "select",
        label: "文字大小",
        options: MARGIN_PADDING_OPTIONS,
      },
      color: { type: "colorSelect", label: "文字颜色" },
      bold: { type: "switch", label: "加粗" },
      italic: { type: "switch", label: "斜体" },
      underline: { type: "switch", label: "下划线" },
      strikethrough: { type: "switch", label: "删除线" },
      margin: {
        type: "select",
        label: "外边距",
        options: MARGIN_PADDING_OPTIONS,
      },
      padding: {
        type: "select",
        label: "内边距",
        options: MARGIN_PADDING_OPTIONS,
      },
    },
    dev: TextDev,
    prod: TextProd,
  },
  Image: {
    name: "Image",
    desc: "图片",
    icon: "icon-tupian",
    type: ComponentEnum.Media,
    defaultProps: {
      alt: "图片",
      width: "50%",
      height: 100,
      margin: MarginPaddingSize.medium,
      padding: MarginPaddingSize.medium,
    },
    attrs: {
      upload: {
        type: "upload",
        label: "上传图片",
      },
      position: {
        type: "select",
        label: "图片位置",
        options: TITLE_POSITION_OPTIONS,
      },
      width: { type: "input", label: "容器宽度" },
      height: { type: "input", label: "容器高度" },
      borderRadius: { type: "input", label: "圆角" },
      margin: {
        type: "select",
        label: "外边距",
        options: MARGIN_PADDING_OPTIONS,
      },
      padding: {
        type: "select",
        label: "内边距",
        options: MARGIN_PADDING_OPTIONS,
      },
 
    },
    dev: ImageDev,
    prod: "",
  },
  Form: {
    name: "Form",
    desc: "表单",
    icon: "icon-biaodan",
    type: ComponentEnum.Form,
    defaultProps: {
      accept: COMMON_ACCEPT.filter((a) => !["Page", "Container"].includes(a)),
      margin: MarginPaddingSize.medium,
      padding: MarginPaddingSize.medium,
      formItemMarginBottem: MarginPaddingSize.medium,
      isCenter: false,
    },
    attrs: {
      margin: {
        type: "select",
        label: "外边距",
        options: MARGIN_PADDING_OPTIONS,
      },
      padding: {
        type: "select",
        label: "内边距",
        options: MARGIN_PADDING_OPTIONS,
      },
      formItemMarginBottem: {
        type: "select",
        label: "表单项间距",
        options: MARGIN_PADDING_OPTIONS,
      },
      isCenter: { type: "switch", label: "表单居中" },
    },
    dev: FormDev,
    prod: "",
  },
  Radio: {
    name: "Radio",
    desc: "单选框",
    icon: "icon-danxuan",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("性别", "sex").defaults,
      selectOptions: [
        { label: "男", value: 2 },
        { label: "女", value: 1 },
        { label: "其他", value: 0 },
      ],
    },
    attrs: {
      ...createFormFieldConfig("性别", "sex").attrs,
      selectOptions: {
        type: "selectOptions",
        label: "选项",
        options: [
          { label: "男", value: 2 },
          { label: "女", value: 1 },
          { label: "其他", value: 0 },
        ],
      },
    },
    dev: RadioDev,
    prod: "",
  },
  Checkbox: {
    name: "Checkbox",
    desc: "多选框",
    icon: "icon-duoxuan-",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("爱好", "hobby").defaults,
      selectOptions: [
        { label: "羽毛球", value: 2 },
        { label: "乒乓球", value: 1 },
        { label: "篮球", value: 0 },
      ],
    },
    attrs: {
      ...createFormFieldConfig("爱好", "hobby").attrs,
      selectOptions: {
        type: "selectOptions",
        label: "选项",
        options: [
          { label: "羽毛球", value: 2 },
          { label: "乒乓球", value: 1 },
          { label: "篮球", value: 0 },
        ],
      },
    },
    dev: CheckBoxDev,
    prod: "",
  },
  DatePicker: {
    name: "DatePicker",
    desc: "日期选择器",
    icon: "icon-riqixuanze",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("出生日期", "date").defaults,
      showTime: false,
      format: "YYYY-MM-DD",
      picker: "date",
      placeholder: "请选择日期",
    },
    attrs: {
      ...createFormFieldConfig("出生日期", "date").attrs,
      showTime: { type: "switch", label: "显示时间" },
      format: { type: "input", label: "日期格式" },
      picker: {
        type: "select",
        label: "选择器类型",
        options: [
          { label: "日期", value: "date" },
          { label: "日期时间", value: "datetime" },
          { label: "月", value: "month" },
          { label: "年", value: "year" },
          { label: "季度", value: "quarter" },
        ],
      },
      placeholder: { type: "input", label: "提示信息" },
    },
    dev: DatePickerDev,
    prod: "",
  },
  Select: {
    name: "Select",
    desc: "下拉选择器",
    icon: "icon-xialaxuanzeqi",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("人物", "person").defaults,
      selectOptions: [
        { label: "Jack", value: "jack" },
        { label: "Lucy", value: "lucy" },
        { label: "Yiminghe", value: "yiminghe" },
        { label: "Disabled", value: "disabled" },
      ],
    },
    attrs: {
      ...createFormFieldConfig("人物", "person").attrs,
      placeholder: { type: "input", label: "提示信息" },
      selectOptions: {
        type: "selectOptions",
        label: "选项",
        options: [
          { label: "Jack", value: "jack" },
          { label: "Lucy", value: "lucy" },
          { label: "Yiminghe", value: "yiminghe" },
          { label: "Disabled", value: "disabled" },
        ],
      },
    },
    dev: SelectDev,
    prod: "",
  },
  Input: {
    name: "Input",
    desc: "输入框",
    icon: "icon-input",
    type: ComponentEnum.Form,
    defaultProps: {
      label: "用户名",
      placeholder: "请输入内容",
      name: "username",
    },
    attrs: {
      ...createFormFieldConfig("用户名", "username"),
      placeholder: { type: "input", label: "提示信息" },
    },
    dev: InputDev,
    prod: "",
  },
  InputNumber: {
    name: "InputNumber",
    desc: "数字输入框",
    icon: "icon-shuzishurukuang",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("年龄", "age").defaults,
      min: 0,
      max: 150,
      placeholder: "请输入数字",
    },
    attrs: {
      ...createFormFieldConfig("年龄", "age").attrs,
      min: { type: "input", label: "最小值" },
      max: { type: "input", label: "最大值" },
      placeholder: { type: "input", label: "提示信息" },
    },
    dev: InputNumberDev,
    prod: "",
  },
  TextArea: {
    name: "TextArea",
    desc: "文本域",
    icon: "icon-wenbenyu",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("备注", "remark").defaults,
      placeholder: "请输入内容",
      maxLength: 200,
      showCount: true,
    },
    attrs: {
      ...createFormFieldConfig("备注", "remark").attrs,
      placeholder: { type: "input", label: "提示信息" },
      maxLength: { type: "input", label: "最大长度" },
      showCount: { type: "switch", label: "显示字数" },
      autoSize: { type: "switch", label: "自适应高度" },
    },
    dev: TextAreaDev,
    prod: "",
  },
  Cascader: {
    name: "Cascader",
    desc: "级联选择器",
    icon: "icon-c053jilianxuanze",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("地址", "address").defaults,
      placeholder: "请选择地址",
      options: [
        {
          value: "zhejiang",
          label: "浙江",
          children: [
            {
              value: "hangzhou",
              label: "杭州",
              children: [{ value: "xihu", label: "西湖" }],
            },
          ],
        },
      ],
    },
    attrs: {
      ...createFormFieldConfig("地址", "address").attrs,
      placeholder: { type: "input", label: "提示信息" },
    },
    dev: CascaderDev,
    prod: "",
  },
  Switch: {
    name: "Switch",
    desc: "开关",
    icon: "icon-gongyezujian-kaiguan",
    type: ComponentEnum.Form,
    defaultProps: {
      ...createFormFieldConfig("开关", "switch").defaults,
      checkedChildren: "开",
      unCheckedChildren: "关",
    },
    attrs: {
      ...createFormFieldConfig("开关", "switch").attrs,
      checkedChildren: { type: "input", label: "选中文字" },
      unCheckedChildren: { type: "input", label: "未选中文字" },
    },
    dev: SwitchDev,
    prod: "",
  },
  Table: {
    name: "Table",
    desc: "基础表格",
    icon: "icon-biaodanzujian-biaoge",
    type: ComponentEnum.Table,
    defaultProps: {
      dataColumn: dataColumnDefault,
      url: "http://www.xxx.com",
      isShowPagination: true,
      isShowAction: true,
      isShowHeader: true,
    },
    attrs: {
      dataColumn: {
        type: "tableColumn",
        label: "表格列",
        options: dataColumnDefault,
      },
      url: { type: "input", label: "请求地址" },
      isShowPagination: { type: "switch", label: "显示分页" },
      isShowAction: { type: "switch", label: "显示操作列" },
      isShowHeader: { type: "switch", label: "显示标题" },
    },
    dev: BaseTableDev,
    prod: "",
  },
  BarCharts: {
    name: "BarCharts",
    desc: "柱状图",
    icon: "icon-zhuzhuangtu",
    type: ComponentEnum.Chart,
    defaultProps: {},
    dev: "",
    prod: "",
  },
};

interface State {
  componentConfig: { [key: string]: ComponentConfigType };
}

interface Action {}

interface ComponentConfigType {
  name: string;
  desc: string;
  type: ComponentEnum;
  attrs?: Record<string, any>;
  events?: Record<string, any>;
  allAccept?: Array<string>;
  defaultProps: Record<string, any>;
  dev: ((props: any) => ReactNode) | string;
  prod: ((props: any) => ReactNode) | string;
  icon?: string;
}

const useComponentConfigStore = create<State & Action>(() => ({
  componentConfig: componentConfig,
}));

// 分类工具函数保持不变
export function handleChangeComponentConfig(
  componentConfig: State["componentConfig"]
) {
  const componentMap = new Map<ComponentEnum, ComponentConfigType[]>();
  Object.values(componentConfig).forEach((item) => {
    const group = componentMap.get(item.type) || [];
    group.push(item);
    componentMap.set(item.type, group);
  });
  return Object.fromEntries(componentMap);
}

export default useComponentConfigStore;
